<template>
  <div ref="split" class="split">
    <div ref="deviceList" class="deviceList">
      <DeviceList ref="deviceListChild" :allMethodDicSer="allMethodDicSer" />
    </div>
    <div ref="directiveList" class="directiveList">
      <DirectiveList ref="directiveListChild" @getDirectiveConfig="getDirectiveConfig"
        @exeCmd="exeCmd" />
    </div>
    <div ref="directiveConfig" class="directiveConfig">
      <DirectiveConfig ref="directiveConfigChild" :treeNodeId="treeNodeId" />
    </div>
    <div ref="cmdEnforcement" class="cmdEnforcement">
      <CMDEnforcement ref="cmdEnforcementChild" :manualTestLog="manualTestLog" />
    </div>
  </div>
</template>
<script setup lang="ts">


import { inject } from 'vue';
import { SEND_DEVICE_CMD_KEY } from '../types';
import { useDeviceStore } from "../store/deviceStore";

// 1. 获取平台注入的 sendDeviceCmd（根组件在作用域内，可正常获取）
const sendDeviceCmd = inject(SEND_DEVICE_CMD_KEY);
// 2. 实例化组合式 store
const deviceStore = useDeviceStore();


if (!sendDeviceCmd) {
  console.error("插件根组件未获取到 sendDeviceCmd，初始化失败");
  // return;
}
console.log("插件根组件获取到 sendDeviceCmd，初始化成功", sendDeviceCmd, deviceStore.sendDeviceCmd); // 先确认这个值是否为函数

// 修复参数错误：直接传递 { sendDeviceCmd } 而不是 { injections: sendDeviceCmd }
if (!deviceStore.sendDeviceCmd) {
  console.log("Pinia 中未存储 sendDeviceCmd，进行存储");
  deviceStore.setInjections({ sendDeviceCmd } as any);
}

// 验证存储结果
console.log("存储后 Pinia 中的值：", deviceStore.sendDeviceCmd);


defineOptions({
  name: "DebuggerView"
});
import { ref, onMounted } from "vue";
import DeviceList from "./components/DeviceList.vue";
import DirectiveConfig from "./components/DirectiveConfig.vue";
import DirectiveList from "./components/DirectiveList.vue";
import CMDEnforcement from "./components/CmdEnforcement.vue";
// import CMDEnforceDli from "./components/cmdEnforceDli.vue";
import Split from "split.js";

const split = ref(null);
const deviceList = ref(null);
const directiveList = ref(null);
const directiveConfig = ref(null);
const directiveConfigChild = ref(null);
const cmdEnforcement = ref(null);
const cmdEnforcementChild = ref(null);

const allMethodDicSer = ref("");
const treeNodeId = ref("");
const manualTestLog = ref("");

onMounted(async () => {

  // 初始化分割线
  const options = [
    { el: [deviceList.value, directiveList.value, directiveConfig.value, cmdEnforcement.value], direction: "horizontal", sizes: [20, 20, 20, 40] },
  ];
  options.forEach((item: any) => {
    if (!item.el) return;
    Split(item.el, {
      snapOffset: 0,
      gutterSize: 3,
      sizes: item.sizes,
      direction: item.direction,
      onDragEnd: () => {
        console.log("拖动后执行");
      },
    });
  });
})


const getDirectiveConfig = (id: string) => {
  treeNodeId.value = id;
}

const exeCmd = () => {
  (directiveConfigChild.value as any).saveConfig();
}

</script>
<style lang="scss" scoped>
.split {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;

  .deviceList,
  .directiveList,
  .directiveConfig,
  .cmdEnforcement {
    border: 1px solid #ccc;
  }

  .cmdEnforcement {
    height: calc(100% - 5px);
  }
}
</style>